@font-face{
font-family: customFont;
src: url('font/CandelaBook.otf');
}
@font-face{
font-family: BreeSerif;
src: url('fonts/Bree_Serif/BreeSerif-Regular.ttf');
}

#headingContainer{
	float:left;
	margin:0 auto;
	padding:10px;
	width:100%;
}

#heading{
	font-size:50px;
	position:absolute;
	margin:0 auto;
	margin-left:220px;
	min-height:60px;
	max-height:100px;
	font-family: 'BreeSerif', serif;
	font-weight: bold;
	color: #414848;
	opacity:0.2;
}

#slideout {
    background: #666;
    position: relative;
    width: 300px;
    height: 80px;
    top: 45%;
    left:-280px;
}
   
#containclickme {
background: white;
    float:right;
    height: 80px;
    width:20px;
}

#clickme {
    float: right;
    height: 20px;
    width: 20px;
    background: #ff0000;
}

#slidecontent {
    float:left;
}


input {
	width: 190px;
	height:40px;
	
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 400;
	color: #9d9e9e;
	text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
	
	background: #fff;
	border: 1px solid #fff;
	border-radius: 5px;
	
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
	-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
	-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
}

input:hover {
	background: #dfe9ec;
	color: #414848;
}

input:focus {
	background: #dfe9ec;
	color: #414848;
	
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}
input{
	transition: all 0.5s;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	-ms-transition: all 0.5s;
}

#answer_textbox {
	width: 180px;
	height:30px;
	
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 400;
	color: #9d9e9e;
	text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
	
	background: #dfe9ec;
	border: 1px solid #fff;
	border-radius: 5px;
	
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
	-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
	-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
}

#answer_textbox:hover {
	background: #fff;
	color: #414848;
}

#answer_textbox:focus {
	background: #fff;
	color: #414848;
	
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}
#answer_textbox {
	transition: all 0.5s;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	-ms-transition: all 0.5s;
}

#delete{
	width: 30px;
	height:30px;
	float:right;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: bold;
	color: #9d9e9e;
	text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
	margin:5px;
	margin-right:-40px;
	background: #fff;
	border: 1px solid #fff;
	border-radius: 20px;
	
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
	-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
	-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
}
#delete:hover {
	background: #F59898;
	color: #414848;
}

#delete:focus {
	background: #dfe9ec;
	color: #414848;
	
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}
#delete{
	transition: all 0.5s;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	-ms-transition: all 0.5s;
}



#add {
	width: 50px;
	height:30px;
	margin-left:140px;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 400;
	color: #9d9e9e;
	text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
	
	background: #fff;
	border: 1px solid #fff;
	border-radius: 5px;
	
	box-shadow:  0 1px 3px rgba(0,0,0,0.50);
	-moz-box-shadow:  0 1px 3px rgba(0,0,0,0.50);
	-webkit-box-shadow:  0 1px 3px rgba(0,0,0,0.50);
}
#add:hover {
	background: #dfe9ec;
	color: #414848;
}

/* #add:focus {
	background: #dfe9ec;
	color: #414848;
	
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
} */
#add{
	transition: all 0.5s;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	-ms-transition: all 0.5s;
}

body{
	background:url('background/blueish.jpg');
	background-attachment:fixed;
	background-size:cover;
	font-family: customFont;
}

div.mainContainer{
	height:300px;
	margin:0 auto;
	margin-top:20%;
	width:400px;
	text-align:center;
}

/* form input{
	border-radius:3px;
} */
#registration{
	border-radius:3px;
	float:right;
}
#registrationMain{
	background:white;
	border-radius:5px;
	float:right;
	height:100px;
	margin:5px;
	text-align:right;
	width:300px;	
}

#loginMain{
	background:white;
	border-radius:5px;
	float:left;
	margin:5px;
	margin-top:57px;
	padding:5px;
	text-align:right;
	width:250px;	
}

div.surroundAll{
	background:rgba(255, 255, 255, 0.3);
	border-radius:5px;
	display:flex;
	margin:0 auto;
	width:1050px;
	height:700px;
}

#header{
	float:left;
	width:900px;
}

#info{
	float:left;
	height:50px;
	line-height:50px;
	margin:10px;
	padding:10px;
	width:985px;
	background: #d4dedf;
	border-radius:5px;
	
	box-shadow:  0 1px 0 rgba(0,0,0,0.15);
	-moz-box-shadow:  0 1px 0 rgba(0,0,0,0.15);
	-webkit-box-shadow:  0 1px 0 rgba(0,0,0,0.15);
	
}

#score{
	float:left;
	min-width: 90px;
	max-width: 200px;
	line-height:30px;
	height:40px;
	margin:5px;
	padding: 5px;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: bold;
	color: black;
	text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
	text-decoration:none;
	background: #56c2e1;
	border: 1px solid #fff;
	border-radius: 5px;
	
	box-shadow:  0 1px 3px rgba(0,0,0,0.50);
	-moz-box-shadow:  0 1px 3px rgba(0,0,0,0.50);
	-webkit-box-shadow:  0 1px 3px rgba(0,0,0,0.50);
}

#user{
float:left;
	max-width:600px;
	line-height:15px;
	height:15px;
	margin:5px;
	margin-left:20px;
	padding: 5px;
	position: absolute;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: bold;
	color: #9d9e9e;
	text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
	text-align:center;
	text-decoration:none;
	background: #fff;
	border: 1px solid #fff;
	border-radius: 5px;
	
	box-shadow:  0 1px 3px rgba(0,0,0,0.50);
	-moz-box-shadow:  0 1px 3px rgba(0,0,0,0.50);
	-webkit-box-shadow:  0 1px 3px rgba(0,0,0,0.50);
}

#username{
	float:left;
	margin-right:5px;
	margin-left:5px;
}

#rank{
	float:left;
	margin-left:5px;
	margin-right:5px;
}

#ranking{
float:left;
	width: 120px;
	line-height:15px;
	height:15px;
	margin:5px;
	margin-left:20px;
	padding: 5px;
	position: absolute;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: bold;
	color: #9d9e9e;
	text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
	text-align:center;
	text-decoration:none;
	background: #fff;
	border: 1px solid #fff;
	border-radius: 5px;
	
	box-shadow:  0 1px 3px rgba(0,0,0,0.50);
	-moz-box-shadow:  0 1px 3px rgba(0,0,0,0.50);
	-webkit-box-shadow:  0 1px 3px rgba(0,0,0,0.50);
}

#scoreBoard{
	float:left;
	max-height:500px;
	min-height: 200px;
	margin:10px;
	padding:10px;
	min-width:200px;
	max-width:500px;
	background: #f3f3f3;
	border: 1px solid #fff;
	border-radius: 5px;
	
	box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	
	font-family:customFont;
	line-height: 15px;
}

div.bgform{
	float:left;
	position:relative;
	top:-6px;
}

button.btn{
	float:left;
	min-width: 90px;
	max-width: 200px;
	line-height:30px;
	height:40px;
	margin:5px;
	padding: 5px;
	font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
	font-weight: bold;
	color: black;
	text-decoration:none;
	background: #56c2e1;
	border: 1px solid #fff;
	border-radius: 5px;
	
	box-shadow:  0 1px 3px rgba(0,0,0,0.50);
	-moz-box-shadow:  0 1px 3px rgba(0,0,0,0.50);
	-webkit-box-shadow:  0 1px 3px rgba(0,0,0,0.50);
}

#scoreNumber{
	color:red;
	float:right;
}

#exit{
	float:right;
	width: 70px;
	line-height:15px;
	height:15px;
	margin:5px;
	margin-left:940px;
	padding: 5px;
	position: absolute;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: bold;
	color: #9d9e9e;
	text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
	text-align:center;
	text-decoration:none;
	background: #fff;
	border: 1px solid #fff;
	border-radius: 5px;
	
	box-shadow:  0 1px 3px rgba(0,0,0,0.50);
	-moz-box-shadow:  0 1px 3px rgba(0,0,0,0.50);
	-webkit-box-shadow:  0 1px 3px rgba(0,0,0,0.50);
}

#surroundingBox{
	float:left;
	margin-top:2%;
	padding:10px;
}

#tabooContainer{
	float:left;
	height:500px;
	margin:10px;
	padding:10px;
	width:200px;
	background: #f3f3f3;
	border: 1px solid #fff;
	border-radius: 5px;
	
	box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

#pictureContainer{
	float:left;
	display:flex;
	height:500px;
	margin:10px;
	padding:10px;
	width:500px;
	background: #f3f3f3;
	border: 1px solid #fff;
	border-radius: 5px;
	text-align:center;
	box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

#pictureContainer img{
	max-width:500px;
	min-width:400px;
	max-height:500px;
	margin:auto auto;
}

#yourWordsContainer{
	float:left;
	height:376px;
	margin:10px;
	padding:10px;
	width:200px;
	background: #f3f3f3;
	border: 1px solid #fff;
	border-radius: 5px;
	
	box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

#answerBox{
	
	background: white;
	border: 1px solid #fff;
	border-radius: 5px;
	float:left;
	font-family:customFont;
	height:40px;
	margin:5px;
	padding:5px;
	width:180px;
	line-height:40px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
#answerBox:after {
	background: white;
	transition: all 0.5s;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	-ms-transition: all 0.5s;
}



#stabilizer{
	float:left;
	height:1px;
	margin:5px;
	margin-top:-15px;
	padding:5px;
	width:180px;
	z-index:-5;
	line-height:40px;
}

#wordGroup{
	float:left;
	height:340px;
	width:195px;
}

#tabooBox{
	float:left;
	height:40px;
	line-height:40px;
	margin:5px;
	padding:5px;
	width:180px;
	text-align:center;
	background: white;
	border: 1px solid #fff;
	border-radius: 5px;
	font-family:customFont;
	box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
#taboo p{
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: bold;
	color: #9d9e9e;
	text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
	text-align:center;
}

/* #yourWordsContainer #sendInput{
	background:url('background/send2.jpg');
	background-color:#56c2e1;
	background-size:cover;
	float:left;
	font-weight:bold;
	height:40px;
	margin-top:350px;
	width:100px;
	box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
	-moz-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
	-webkit-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
} */

/* #yourWordsContainer #nextInput{
	background:url('background/next.png');
	background-size:cover;
	border-radius:5px;
	float:right;
	font-weight:bold;
	height:30px;
	margin-top:350px;
	width:100px;
} */
#yourWordsContainer #sendInput {
float:left;
	margin-top:350px;
	margin-left:-200px;
	width: 90px;
	height:30px;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: bold;
	color: #fff;
	text-shadow: 1px 1px 0 rgba(256,256,256,0.1);
	position:absolute;
	background: #56c2e1;
	border: 1px solid #fff;
	border-radius: 5px;
	
	box-shadow:  0 1px 3px rgba(0,0,0,0.50);
	-moz-box-shadow:  0 1px 3px rgba(0,0,0,0.50);
	-webkit-box-shadow:  0 1px 3px rgba(0,0,0,0.50);
}
#yourWordsContainer #sendInput:hover {
	background: #dfe9ec;
	color: #414848;
}

/* #yourWordsContainer #sendInput:focus {
	background: #dfe9ec;
	color: #414848;
	
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
} */
#yourWordsContainer #sendInput{
	transition: all 0.5s;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	-ms-transition: all 0.5s;
}

#yourWordsContainer #nextInput {
	float:right;
	margin-top:350px;
	margin-left:-95px;
	width: 90px;
	height:30px;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: bold;
	color: #9d9e9e;
	text-shadow: 1px 1px 0 rgba(256,256,256,0.1);
	background: white;
	border: 1px solid #fff;
	border-radius: 5px;
	position:absolute;
	box-shadow:  0 1px 3px rgba(0,0,0,0.50);
	-moz-box-shadow:  0 1px 3px rgba(0,0,0,0.50);
	-webkit-box-shadow:  0 1px 3px rgba(0,0,0,0.50);
}
#yourWordsContainer #nextInput:hover {
	background: #dfe9ec;
	color: #414848;
}

/* #yourWordsContainer #nextInput:focus {
	background: #dfe9ec;
	color: #414848;
	
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
} */
#yourWordsContainer #nextInput{
	transition: all 0.5s;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	-ms-transition: all 0.5s;
}

/* #nextInput:active{
	background:grey;
	border:2px solid black;
}

#sendInput:active{
	background:grey;
	border:2px solid black;
} */

#answer{
	float:left;
	height:80px; 
	line-height:40px;
	margin:10px;
	padding:10px;
	width:200px;
	background: #f3f3f3;
	border: 1px solid #fff;
	border-radius: 5px;
	
	box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* #answer #add{
	border-radius:5px;
	float:right;
	font-weight:bold;
	height:30px;
	margin-right:5px;
	width:90px;
} */
´
/* #answer input{
	margin:0 auto;
} */

